﻿
<template>
  <div class="Letter_man_contain" ref="Detail_Excahnge_contain">
    <!--header s-->  
    <div class="Letter_man_contain_header">
        我的信息
    </div>   
    <!--header e-->  
    <!-- header_user_box s-->
    <div class="header_user_box">
      <!--header left S-->
      <div class="header_user_box_left">
        <div class="user_img">
          <img v-bind:src='img' />
        </div>
        <div class="user_id">
          ID:{{user.ident}}
        </div>
        <!--<div c;ass="header_user_box_left_bot">
      <div class="header_user_box_left_bot_1"></div>
      <div class="header_user_box_left_bot_2"></div>
    </div>-->
      </div>
      <!--header left e-->
      <!--header right s-->
      <div class="header_user_box_right">
        <ul class="user_msg_box_right_list">
          <li>
            用户名:{{user.userName}}
          </li>
          <li>
            学校:<span class="user_msg_school_left" style="">{{user.school_name}}</span>
          </li>
          <li>
            笔名:<span class="user_msg_school_left">{{user.penName}}</span>
          </li>
          <li>
            性别:<span class="user_msg_school_left">{{user.sex}}</span>
          </li>
          <li>
            星座:<span class="user_msg_school_left">{{user.constellation}}</span>
          </li>
        </ul>
      </div>
      <!--header right e-->
    </div>
    <!-- header_user_box e-->
    <!--scroll  s-->
    <!--<div class="wraper_outer">
      <scroller class="clearfix" ref="scroll">-->
        <!--box s-->
       <!-- <div class="last_box" v-on:touchstart="show_layer_box">
          <img src="../../../../static/img/login_bg.png" alt="Alternate Text" class="last_box_img" />
          <p>复古信片</p>
          <div class="last_box_list">
            很有意思的复古小物品明信片，指的收藏
          </div>
          <div class="last_box_user">
            <img src="" class="f_l last_box_user_img">
            <div class="last_box_user_name">
              用户名
            </div>
          </div>
        </div>-->
        <!--box e-->
      <!--</scroller>-->
    </div>
    <!--scroll  e-->
</template>

<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import Vue from "vue"
  import { Toast, Indicator } from 'mint-ui';
export default {
  name: 'Detail_Exchange',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      show_layer:false,
      get_layer_show: this.$store.getters.get_layer_show,
      user: {},
      img:""
    }
  },
  mounted: function () {
    let user = this.get_user();
    if (user.insert == false) {
      this.$store.dispatch("thom_redirect", { name: "/Index_main/Wrap_certain_layer/Certain_layer_input", router: this.$router });
      return;
    }
    this.user = user;
    this.$http.get('/yizhiweimen/api/user/getUserById?id=' + user.id)
      .catch((thrown) => {
        Toast({
          message: '网络出错',
          position: 'bottom',
          duration: 2000
        });
      }).then((e) => {
        this.$store.dispatch("thom_redirect",
          {
            name: "/my_mess", router: this.$router
          });
        this.img = e.data.image;
        this.user.userName = e.data.userName
      })
  },
  methods: {
    hide_detail: function () {
      window.removeEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
      });
      this.$emit('hide_detail')
    },
    ...mapGetters([
      "get_user"
    ])
  },
  components: {
  }
}
</script>
<style scoped>
  .Letter_man_contain {
    // background-image: url(../../../../static/img/bg_all.png);
    background-position: center top;
    background-size: contain;
    width: 100%;
    height: 100%;
    background-color: rgb(64, 44, 32);
  }
  .header_user_box{
    position:absolute;
    top:30%;
    left:50%;
    transform:translate(-50%);
    z-index:2
  } 
  ._v-container {
    height: 100px;
  }
  /*header_mess_box*/
  .wraper_outer {
    height: 20rem;
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
  } 
  .user_msg_school_left {
    margin-left: 4vw;
  }
  .user_msg_box_right_list {
    margin-top: 0.55rem;
    margin-left: 1.5rem;
  } 
  .Letter_man_contain {
    color: #9f5c2f;
  }
  .user_msg_box_right_list li{
    line-height:1.4;
  } 
  .user_id {
    font-size: 0.7rem;
    margin-top: 0.6rem;
  }
  .header_user_box_left_bot {
    color: #9f5c2f;
  } 
  .user_img {
    margin:0 auto;
    height: 3.7rem;
    width: 3.7rem;
    border-radius: 50%;
    position: relative;
    border: 1px solid #9f5c2f;
  }
  .user_img img {
    display:block;
    border: 0;
    height: 3.4rem;
    width: 3.4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    outline:none;
  }
  .header_user_box_left {
    width: 40%;
    float: left;
    margin-top:0.3rem;
  }
  /*.header_user_box::before {
    content: '';
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px);
    z-index: -3;
   // margin: -30px;
    background-image: url(../../../../static/img/bg_all.png);
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
  }*/ 
  .header_user_box_right {
    width: 60%;
    float: left;
    font-size: 0.7rem;
    text-align: left;
  }
  .header_user_box {
    box-sizing: border-box;
    width: 93%;
    /*height: 6rem;*/
    background-color: #fff;
    border-radius: 2vw;
    margin: 0.5rem auto 0.5rem;
    box-shadow: 0 4px 6px 0px rgba(128, 128, 128, 0.39);
  }
/*header_mess_box*/
  /*header*/
  .Letter_man_contain_header {
    font-size: 0.9rem;
    text-align: center;
    height: 2.2rem;
    line-height: 2.2rem;
    letter-spacing: 1px;
    background-color: #9f5c2f;
    color: #fff;
  }
  .Letter_man_contain {
   // background-color: #eee;
  } 
  /*header*/
  /*last box */
  .last_box {
    float: left;
    width: 30vw;
    height: 7.2rem;
    box-shadow: 0 0 10px 2px rgba(177, 173, 173, 0.44);
    background-color: #fff;
    border-radius: 2vw;
    margin-top: 0.37rem;
    margin-left: 2.5vw;
  }

  .last_box_img {
    border-radius: 2vw 2vw 0 0;
    width: 100%;
    height: 3.75rem;
  }
  /*last_container s*/
  /* .last_box:nth-last-of-type(1) {
    margin-bottom:6rem;
  }
   */
  .last_box_style {
    margin-bottom: 6rem;
  }

  .last_box p {
    font-size: 0.5rem;
    font-weight: 600;
    text-align: left;
    margin-left: 8%;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
  }

  .last_box_list {
    margin-left: 6%;
    margin-right: 10%;
    font-size: 0.5rem;
  }

  .last_box_user_img {
    float: left;
    display: block;
    width: 0.85rem;
    height: 0.85rem;
    border: 1px solid #a25f34;
    border-radius: 0.5vw;
  }

  .last_box_user_name {
    float: left;
    color: #a25f34;
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: middle;
    margin-top: 0.15rem;
    margin-left: 0.2rem;
  }

  .last_box_user {
    transform: translate(6vw,0.2rem);
  }
  /*last box */
</style>header_user_box